﻿<phone:PhoneApplicationPage 
	x:Class="DIS.WindowsPhone.Toolkit.Controls.ContactPickerPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
	xmlns:converters="clr-namespace:DIS.WindowsPhone.Toolkit.Converters"
	FontFamily="{StaticResource PhoneFontFamilyNormal}"
	FontSize="{StaticResource PhoneFontSizeNormal}"
	Foreground="{StaticResource PhoneForegroundBrush}"
	SupportedOrientations="Portrait" Orientation="Portrait"
	mc:Ignorable="d" d:DesignHeight="696" d:DesignWidth="480"
	shell:SystemTray.IsVisible="True">

	<phone:PhoneApplicationPage.Resources>
		<converters:GroupItemBackground x:Name="gibConverter" />
		<converters:GroupItemForeground x:Name="gifConverter" />

		<DataTemplate x:Key="ItemTemplate">
			<Grid x:Name="gridItems">
				<Grid.RowDefinitions>
					<RowDefinition Height="Auto"/>
				</Grid.RowDefinitions>
				<Grid.ColumnDefinitions>
					<ColumnDefinition MaxWidth="74" MinWidth="74" Width="74"/>
					<ColumnDefinition Width="100*" MinWidth="100"/>
				</Grid.ColumnDefinitions>
				<Border Width="62" Height="62" HorizontalAlignment="Left" Margin="6" Background="{StaticResource PhoneChromeBrush}" />
				<!--<Image Width="62" Height="62" HorizontalAlignment="Left" Margin="6" Source="{Binding Image}" Visibility="{Binding Converter = {StaticResource ciivConverter}, Path=ShowImage}" d:IsHidden="True" />-->
				<TextBlock Grid.Column="1" Margin="11,0,0,0" VerticalAlignment="Center" FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}"
							Text="{Binding DisplayName}"    x:Name="tbDisplayName"/>
				<!--bindings:MainPage.InlineList="{Binding FormattedDisplayName}"-->
			</Grid>
		</DataTemplate>

		<DataTemplate x:Key="groupHeaderTemplate">
			<Border Width="62" Height="62" Margin="6" Background="{StaticResource PhoneAccentBrush}" HorizontalAlignment="Left" VerticalAlignment="Center">
				<TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" Foreground="White" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="5,0,0,3" Text="{Binding Title}" FontFamily="{StaticResource PhoneFontFamilyLight}" />
			</Border>
		</DataTemplate>

		<DataTemplate x:Key="groupItemTemplate" >
			<Border Width="99" Height="99" Margin="6" Background="{Binding Converter={StaticResource gibConverter}, Path=IsEnabled}" >
				<TextBlock Foreground="{Binding Converter={StaticResource gifConverter}, Path=IsEnabled}" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="9,0,0,1" Text="{Binding Title}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" />
			</Border>
		</DataTemplate>


	</phone:PhoneApplicationPage.Resources>

	<StackPanel x:Name="MainGrid">

		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:Name="VisualStateGroup">
				<VisualStateGroup.Transitions>
					<VisualTransition GeneratedDuration="0">
						<Storyboard>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="tbSearch">
								<DiscreteObjectKeyFrame KeyTime="0">
									<DiscreteObjectKeyFrame.Value>
										<Visibility>Collapsed</Visibility>
									</DiscreteObjectKeyFrame.Value>
								</DiscreteObjectKeyFrame>
							</ObjectAnimationUsingKeyFrames>
						</Storyboard>
					</VisualTransition>
				</VisualStateGroup.Transitions>
				<VisualState x:Name="Searching">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="lblChooseContact">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Collapsed</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="tbSearch">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Visible</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="Normal"/>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>
		<TextBox x:Name="tbSearch" Visibility="Collapsed" TextChanged="tbSearch_TextChanged"></TextBox>
		<TextBlock Text="CHOOSE A CONTACT" Margin="24,46,0,23" Foreground="{StaticResource PhoneContrastBackgroundBrush}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="{StaticResource PhoneFontSizeMedium}" x:Name="lblChooseContact" />
		<toolkit:LongListSelector x:Name="contactsLongList" Background="Transparent"
			GroupItemTemplate="{StaticResource groupItemTemplate}"
			GroupHeaderTemplate="{StaticResource groupHeaderTemplate}"
			ItemTemplate="{StaticResource ItemTemplate}"
			GroupViewClosing="contactsLongList_GroupViewClosing" 
			GroupViewOpened="contactsLongList_GroupViewOpened"
			ItemsSource="{Binding}" Margin="18,0,0,0" Height="630" DisplayAllGroups="False" SelectionChanged="contactsLongList_SelectionChanged">
			<toolkit:LongListSelector.GroupItemsPanel>
				<ItemsPanelTemplate>
					<toolkit:WrapPanel/>
				</ItemsPanelTemplate>
			</toolkit:LongListSelector.GroupItemsPanel>
		</toolkit:LongListSelector>

	</StackPanel>

	<!--Sample code showing usage of ApplicationBar-->
	<phone:PhoneApplicationPage.ApplicationBar>
		<shell:ApplicationBar IsVisible="True">
		</shell:ApplicationBar>
	</phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>